//jquery选择器，选中指定元素，绑定实现，执行代码逻辑
$(".btn-list").on("click", function () {
  $("#music-list-dialog").animate({ top: "10rem" }, 100);
});

//点击关闭按钮折叠列表框（课堂练习）
$("#btn-close").click(function () {
  $("#music-list-dialog").animate({ top: "100%" }, 100);
});

/*************************/
//动态创建音频对象，音乐资源的播放通过该对象实现（并且将其包装为jquery对象）
const player = $("<audio>");
//歌曲api接口地址
const baseURL = "http://home.softeem.xin:8088/music/listAll";
//声明空数组缓存从服务端读取的歌曲数据
let musics = [];
//初始化当前正在播放的歌曲索引
let currentIndex = 0;
//初始化播放器当前播放进度和总进度（秒）
let now = 0;
let total = 0;
//标记当前播放器的播放状态 true-播放中  false-未播放
let playing = false;
//循环类型 （0-列表，1-随机，2-单曲）
let loopType = 0;

//前端如何请求服务端数据，有哪些方式？
// 异步请求-ajax（XmlHttpRequest实现与服务端交互）
// websocket-全双工通信（弹幕，直播推流）
//异步
$.get(baseURL, function (data) {
  //缓存数据到变量中
  musics = data;
  //循环遍历歌曲列表  箭头函数
  $.each(musics, (i, m) => {
    $("#music-list").append(`<li data-index="${i}">${m.name}</li>`);
  });
  //为播放器初始化播放源(解决页面初次加载未从列表选择歌曲项播放时，点击播放按钮实现播放源初始化)
  player.prop("src", musics[currentIndex].path);
});

//html5 新增一个全局属性  data-[key]=[value]
//针对动态生成的元素无法直接通过选择器选中,通常需要先选中存在的父元素，再通过父元素将事件传递子元素上
//为列表中每一个列表项绑定点击事件，实现歌曲播放
//事件委派（委托）
$("#music-list").on("click", "li", function () {
  //索引变更前，当前索引指向上一首歌曲,还原上一首歌曲的高亮
  $(`li:eq(${currentIndex})`).removeClass("active");
  //获取当前被点击的列表项索引值（歌曲索引）
  currentIndex = $(this).data("index");
  //获取需要被播放的歌曲对象
  let m = musics[currentIndex];
  //为播放器对象设置播放源
  player.prop("src", m.path);
  //主动触发播放事件
  // player.trigger('play') //player[0].play()
  startPlay();
});

//开始播放
function startPlay() {
  //使用定时器，定时监听播放器准备状态
  let flag = setInterval(function () {
    let state = player.prop("readyState");
    if (state === 4) {
      //执行播放
      player.trigger("play");
      //标记播放器处于播放状态
      playing = true;
      //清理定时器
      clearInterval(flag);
    }
  }, 50);
  //1.同步显示歌曲名称
  $(".music-name").text(musics[currentIndex].name);
  //2.实现唱片旋转
  $(".disc").addClass("playing");
  //3.切换播放按钮为暂停图标
  $(".btn-play-pause>i").removeClass("fa-play").addClass("fa-pause");
  //4.歌曲列表高亮显（背景或歌曲名）示正在播放歌曲（考虑如何清除上一首歌曲的高亮）
  $(`li:eq(${currentIndex})`).addClass("active");
  //5.同步显示唱片封面和背景毛玻璃
  $(".blur-img,.ablum-img").prop("src", musics[currentIndex].ablumImg);
}

//扩展
//1. 同步显示歌曲的当前播放时长和总时长
//2. 进度条实时同步显示
player.on("loadeddata", function () {
  //获取歌曲的播放总进度
  total = this.duration;
  //将总时长在指定位置显示
  $(".time-total").text(fmtTime(total));
});

//监听currentTime的实时变化
player.on("timeupdate", function () {
  //获取当前播放器的播放进度
  now = this.currentTime;
  //实时显示当前时间到指定位置
  $(".time-now").text(fmtTime(now));
  //思考：如何实现进度条实时改变
  let progress = (now / total) * 100 + "%";
  //设置进度条的宽度为实时歌曲进度
  $(".progress").css("width", progress);
});

//时间格式化通用函数，将以秒为单位的时间格式化为：mm:ss
function fmtTime(t) {
  //根据提供的时间构建一个日期对象
  t = new Date(t * 1000);
  //获取当前日期所表示的分钟数
  let m = t.getMinutes();
  let s = t.getSeconds();
  //mm:ss
  m = m < 10 ? "0" + m : m;
  s = s < 10 ? "0" + s : s;
  return `${m}:${s}`;
}

//为进度条绑定点击事件，控制歌曲播放进度变化
$(".box-progress").on("click", function (e) {
  //当前容器总宽度
  let w = $(this).width();
  //获取点击位置和左侧的距离
  let x = e.offsetX;
  //获取点击位置的实时进度
  now = (x / w) * total;
  //设置播放器的当前位置为指定值
  player.prop("currentTime", now);
});

$(".btn-play-pause").on("click", function () {
  if (playing) {
    //暂停
    player.trigger("pause");
    //停止唱片旋转
    $(".disc").removeClass("playing");
    //将图标切换为播放图标
    $(".btn-play-pause>i").removeClass("fa-pause").addClass("fa-play");
    //将播放状态标记为false(暂停)
    playing = false;
  } else {
    //继续播放
    startPlay();
  }
});

//任务
//1. 按钮控制循环状态变化（loop:0-列表/1-随机/2-单曲）
$(".btn-loop").on("click", function () {
  // 始终让循环类型在0~2之间变化
  loopType = ++loopType % 3;
  let msg = "";
  if (loopType === 0) {
    msg = "列表循环";
    $(this).html('<i class="fa fa-list-ol"></i>');
  } else if (loopType === 1) {
    msg = "随机播放";
    $(this).html('<i class="fa fa-random"></i>');
  } else {
    msg = "单曲循环";
    $(this).html('<i class="fa fa-refresh"></i>');
  }
  //显示提示框
  $("#tips > span")
    .text(msg)
    .fadeIn(1000, function () {
      $(this).fadeOut(1000);
    });
});

//2. 点击上一曲/下一曲按钮，结合循环方式切歌
function switchMusic(t){
  //索引变更前，当前索引指向上一首歌曲,还原上一首歌曲的高亮
  $(`li:eq(${currentIndex})`).removeClass("active");
  switch(loopType){
    case 0:
      //列表循环
      if(t === 'prev'){
        //上一曲
        currentIndex = --currentIndex < 0 ? musics.length - 1 : currentIndex 
      }else{
        //下一曲
        currentIndex = ++currentIndex >= musics.length ? 0 : currentIndex
      }
      break
    case 1:
      //随机播放 [0.0,1.0)  0.023* 10 = 0
      currentIndex = Math.floor(Math.random() * musics.length)
      break
  }
  //为播放器重新指定播放源
  player.prop('src',musics[currentIndex].path)
  //开始播放
  startPlay()
}
//上一曲
$('.btn-prev').on('click',function(){
  switchMusic('prev')
})
//下一曲
$('.btn-next').on('click',switchMusic)


//3. 歌曲播放完毕之后自动切歌（参考audio-api  ended事件）
player.on('ended',switchMusic)
